<style lang="sass" scoped>
    .img{
        width:120px;
    }
</style>
<template>
    <div v-jurdie="'book1200'" class="container">
        <div class="search-cont">
            <el-input placeholder="请输入类目名称搜索" v-model="search.keyWord">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button @click="getList()" type="primary" :plain="false">搜索</el-button>
            <el-button v-jurdie="'book1201'" @click="categShow('add')" type="primary" :plain="false">新增</el-button>
        </div>
        <div class="table-cont">
            <el-table :data="list" style="width: 100%">
                <el-table-column prop="imageUrl" label="类目图片">
                    <template slot-scope="props">
                        <img class="img" v-if="props.row.imageUrl" :src="props.row.imageUrl" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="categName" label="类目名称">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column prop="operator" label="创建人">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="props">
                        <el-button v-jurdie="'book1202'" @click="categShow('edit',props.row)" type="primary" :plain="false" size="small">修改</el-button>
                        <el-button v-jurdie="'book1203'" @click="deleteCateg(props.row)" type="primary" :plain="false" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="search.total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>

        <!-- 新增/修改类目 -->
        <el-dialog :title="categObj.title" :visible.sync="categObj.show">
            <el-form label-width="80px">
                <el-form-item label="类目名称:">
                    <el-input v-model.trim="categObj.categName"></el-input>
                </el-form-item>
                <el-form-item label="类目图片:">
                    <upload-image :data.sync="categObj.imageUrl"></upload-image>
                </el-form-item>
                <div class="tc mt20">
                    <el-button @click="categAdd()" type="primary">{{categObj.title==='新增类目'?'新增':'修改'}}</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import uploadImage from 'components/uploadImage'
    export default {
        components: {
            uploadImage
        },
        data() {
            return {
                //列表搜索参数
                search:{
                    keyWord:'',
                    pageNo:1, //	是	string	页码
                    pageSize:config.pageSize, //	是	string	当前页显示的条数
                    total:0,
                },
                list:[],
                categObj:{
                    title:'新增',
                    show:false,
                    categId:'',
                    categName:'',
                    imageUrl:[]
                }
            };
        },
        watch:{
            
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                this.getList();
            });
        },
        methods: {
            handleCurrentChange(val) {
                this.search.pageNo = val;
                this.getList();
            },
            getList() {
                let param = JSON.parse(JSON.stringify(this.search));
                util.ajax({
                    url: config.baseApi + "bookMall-admin/api/categ/getCategListPage",
                    data: param,
                    success: data => {
                        this.list = data.data.record;
                        this.search.total = data.data.totalNum;
                    }
                });
            },
            categShow(type,item){
                let obj = {
                    show:true,
                    categId:'',
                    categName:'',
                    imageUrl:[]
                }
                if(type==='add'){
                    obj.title='新增类目'
                }else{
                    obj.title="修改类目"
                    obj.categId = item.categId;
                    obj.categName = item.categName;
                    obj.imageUrl = item.imageUrl?item.imageUrl.split(','):[];
                }
                this.categObj = obj;
            },
            categAdd(){
                let success = '',
                    url = '';
                let param = {
                    categName:this.categObj.categName,
                    imageUrl:this.categObj.imageUrl.toString(),
                }
                if(this.categObj.title==='修改类目'){
                    param.categId = this.categObj.categId;
                    success = '修改成功！';
                    url = 'bookMall-admin/api/categ/modifyCateg'
                }else{
                    success = '新增成功！';
                    url = 'bookMall-admin/api/categ/addCateg'
                }
                util.ajax({
                    url:config.baseApi + url,
                    data:param,
                    success:()=>{
                        popup.miss({content:success})
                        this.categObj.show = false;
                        this.getList();
                    }
                })
            },
            deleteCateg(item){
                popup.confirm({
                    content:'是否删除该类目？',
                    yes:()=>{
                        util.ajax({
                            url: config.baseApi + "bookMall-admin/api/categ/deleteCateg",
                            data: {
                                categId:item.categId
                            },
                            success: data => {
                                popup.miss({content:'操作成功！'});
                                this.getList();
                            }
                        });
                    }
                })
            }
        },
        
    };
</script>